<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2024/10/26
  Time: 8:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工审核页面</title>
    <%--引入vue--%>
    <script src="../js/vue.js"></script>
    <%--引入axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <%--===================================================搜索框========================================================--%>
    <el-form :inline="true" :model="selectForm" class="demo-form-inline">
        <el-form-item>
            <el-select v-model="selectForm.branchid" placeholder="请选择要查询的分店">
                <el-option v-for="b in branchList" :label="b.branchname" :value="b.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询<i class="el-icon-search el-icon--right"></i></el-button>
            <el-button type="primary" @click="refresh">刷新<i class="el-icon-refresh el-icon--right"></i></el-button>
        </el-form-item>
    </el-form>
    <%--================================================所有调动员工信息表单===================================================--%>
    <template>
        <el-table
                :data="staffEx"
                border
                style="width: 100%"
                :row-class-name="tableRowClassName">
            <el-table-column
                    prop="id"
                    label="ID"
            >
            </el-table-column>
            <el-table-column
                    prop="staff.staffname"
                    label="员工姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="oldBranch.branchname"
                    label="旧分店">
            </el-table-column>
            <el-table-column
                    prop="oldDept.deptname"
                    label="旧部门">
            </el-table-column>
            <%--   <el-table-column
                       prop="oldRole.rolename"
                       label="旧角色">
               </el-table-column>--%>
            <el-table-column
                    prop="newBranch.branchname"
                    label="新分店">
            </el-table-column>
            <el-table-column
                    prop="newDept.deptname"
                    label="新部门">
            </el-table-column>
            <%--    <el-table-column
                        prop="newRole.rolename"
                        label="新角色">
                </el-table-column>--%>
            <el-table-column
                    prop="applytime"
                    label="申请时间">
            </el-table-column>
            <el-table-column
                    prop="applystaff.staffname"
                    label="申请人">
            </el-table-column>
            <el-table-column
                    prop="extime"
                    label="审核时间">
            </el-table-column>
            <el-table-column
                    prop="exStaff.staffname"
                    label="审核人">
            </el-table-column>
            <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.state==1">待审核</el-tag>
                    <el-tag type="success" v-if="scope.row.state==2">审核通过</el-tag>
                    <el-tag type="danger" v-if="scope.row.state==3">已驳回</el-tag>
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="200px">
                <template slot-scope="scope">
                        <span v-if="scope.row.state==1">
                            <el-button type="primary" size="small" @click="pass(scope.row)" round>通过<i
                                    class="el-icon-circle-check el-icon--right"></i></el-button>
                            <el-button type="danger" size="small" @click="reject(scope.row)" round>驳回<i
                                    class="el-icon-circle-close el-icon--right"></i></el-button>
                        </span>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <%--~~~~~~~~~~~~~~~~~~~~~~~分页~~~~~~~~~~~~~~~~~~~~~--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<%--=======================================================js代码====================================================--%>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            selectForm: {},//搜索表单对象
            staffEx: undefined,//员工审核申请列表
            branchList: undefined,//所有分店
            currentPage: 1,//当前页码
            pageSize: 10,//每页显示条数
            total: 0,//总条数
            UserInfo: undefined,//当前登录者信息
            newbranchid: undefined,//新分店id
        },
        created() {
            this.loadStaffEx();//加载员工审核申请
            this.loadBranch();//加载所有分店名
            this.loadUserInfo();//加载当前登录者信息
        },
        methods: {
            //通过审核
            pass(row) {
                if (this.userInfo.branchid != row.branchid) {//判断是否为当前分店的店长
                    this.$message({
                        type: 'error',
                        message: '您没有权限操作此员工调动申请'
                    })
                } else {
                    //弹出是否确认通过审核
                    this.$confirm('确定通过审核吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post("/stafftransfer/updateStateYes?" +
                            "id=" + row.id +
                            "&newbranchid=" + row.newBranch.branchid +
                            "&newdeptid=" + row.newDept.deptid +
                            "&staffid=" + row.staffid + "&deptid=" + row.deptid
                        ).then(resp => {
                            if (resp.data.code == 200) {
                                this.$message({
                                    type: 'success',
                                    message: resp.data.msg
                                })
                                this.loadStaffEx();
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消通过 !'
                        });
                    });
                }
            },
            //驳回审核
            reject(row) {
                if (this.userInfo.branchid != row.branchid) {//判断是否为当前分店的店长
                    this.$message({
                        type: 'error',
                        message: '您没有权限操作此员工驳回申请'
                    })
                } else {
                    //弹出是否确认驳回
                    this.$confirm('确定驳回审核吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.post("/stafftransfer/updateStateNo?id=" + row.id).then(resp => {
                            this.$message({
                                type: 'success',
                                message: '已驳回!'
                            })
                            this.loadStaffEx();
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消驳回 !'
                        });
                    })
                }
            },
            //获取当前登录者信息
            loadUserInfo() {
                axios.get("/staff/getStaffInfo").then(resp => {
                    this.userInfo = resp.data.data;
                })
            },

            //获取所有调动员工信息
            loadStaffEx() {
                axios.post("/stafftransfer/getAll?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize, this.selectForm).then(resp => {
                    this.staffEx = resp.data.data.list;
                    this.total = resp.data.data.total;
                })
            },
            //加载所有分店名
            loadBranch() {
                axios.get("/branch/getBranchName").then(resp => {
                    this.branchList = resp.data.data;
                })
            },
            // 每页条数
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadStaffEx();
            },
            // 页码
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadStaffEx();
            },
            // 查询
            onSubmit() {
                this.loadStaffEx();
            },
            //刷新
            refresh() {
                this.selectForm = {};//清空搜索框
                this.loadStaffEx();//重新加载数据
            },
            //表格中行的样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 4 === 1) {
                    return 'warning-row';
                } else if (rowIndex % 4 === 3) {
                    return 'success-row';
                }
                return '';
            },
        }
    })
</script>
</html>
